<link rel="stylesheet" type="text/css" media="screen" href="css/dock/layout2.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/menu/qqwebmain.css">
<style>
	.panel {
	width: 233px;
	height: 100px;
	left: 10%;
	top: 50px;
	background-color: #EDEDED;
	background:url(<?php echo Yii::app()->baseUrl."/images/webgl/head/StripePattern.png"?>) repeat;

	position: absolute;
	border-style: solid;
	border-width: 2px;
	/*border-color: #F1F1F1;*/
	}
	.facilityPanel {
	top: 152px;
	left: 80%;
	width: 200px;
	position: absolute;
	background:url(<?php echo Yii::app()->baseUrl."/images/webgl/head/StripePattern.png"?>) repeat;
	}
	.rTypePosition {
	top: 82px;
	color: #000000;
	/*background-color: #999999;*/
	position: absolute;
	}
	.roomtype {
	MARGIN-RIGHT: auto;
	MARGIN-LEFT: auto;
	}
	.roomStyle {
	border-style: solid;
	border-width: 2px;
	margin-top: 1px;
	margin-bottom: 1px;
	text-align: center;
	/*border-color: #F1F1F1;*/
	}
	.selected{
	border-color: red
	}
</style>
<script type="text/javascript">
	$(function() {
		var walls;
		var image = new Image();
		image.src = "obj/wall/initfloor.jpg";
		image.onload = function() {

		}
		$('#put2room').click(function() {

			$('canvas').unbind('mousemove');
			$('canvas').unbind('mousedown');
			$('canvas').unbind('mouseup');

			// var walls = build.calcWalls(scene.getChildByName('group'),show2DCanvas());
			// function show2DCanvas(){、
			// console.warn(build.structs);
			// };
			var walls = build.calcWalls(scene.getChildByName('group'));
			var roomId = "c" + walls.id;
			var roomStyleId = "s" + walls.id;
			var rsd = "#" + roomStyleId;
			// var strSize=walls.size.x+'*'+walls.size.z;
			var addStr = "<div class=roomStyle id=" + roomStyleId + " wid=" + walls.id + ">" + 
						 "<div class=roomStruct style=width:100%;height:100px>" + 
						 	"<canvas id=" + roomId + " style='width:100%; height:100%'></canvas>" + 
						 "</div>" + 
						 "<div class='roomType'> 序号:" + walls.structureNum + "类型:" + RoomUtil.getRoomTypeName(walls.roomType) + "</div>" + "</div>";
			var cid = "#" + roomId;

			$('#roomStyleList').append(addStr);

			if($(".roomStyle").size() > 2) {
				$("#roomStyleList").css({
					marginTop : "-122px"
				});
			} else {
				$("#roomStyleList").css({
					marginTop : "0px"
				});
			}

			$(rsd).bind('click',function(){
			$('.selected').removeClass('selected');
			$(this).addClass('selected');
			}).bind('dblclick', function() {
				build.loadStructure();
				$('canvas').bind('click', function(event) {
					build.getStructure(event);
				});
			});
			var c = document.getElementById(roomId, image);
			var ctxRoom3 = c.getContext("2d");

			build.putTo2D(ctxRoom3, image, walls);
		});
		$('.delroom').bind('click', function() {
			$(".selected").remove();
			var num;
			for(var i = 0; i < build.structs.length; i++) {
				if($('.selected').attr('wid') == build.structs[i].id) {
					num = i;
					break;
				}
			}
			build.structs.splice(num, 1);
		});
		$('.exproom').bind('click', function() {
			// alert($(".selected").attr('wid'));
			var sut;
			for(var i = 0; i < build.structs.length; i++) {
				if($('.selected').attr('wid') == build.structs[i].id) {
					sut = build.structs[i];
					break;
				}
			}
		});
		var thumbnum=1;
		$('.okroom').bind('click',function(){
			// var walls = build.calcWalls(build.structure);
			var wid=build.structure.rndId;
			var roomId = "c" + build.structure.rndId;
			var roomStyleId = "s" + build.structure.rndId;
			var rsd = "#" + roomStyleId;
			// var strSize=walls.size.x+'*'+walls.size.z;
			var addStr = "<div class=roomStyle id=" + roomStyleId + " wid=" + wid + ">" + 
							"<div class=roomStruct style=width:100%;height:100px>" + 
								"<canvas id=" + roomId + " style='width:100%; height:100%'></canvas>" + 
							"</div>" + 
							"<div class='roomType'> 序号:" + thumbnum + "类型:" + RoomUtil.getRoomTypeName(build.structure.roomType) + "</div>" + 
						"</div>";
			var cid = "#" + roomId;
			thumbnum+1;
			$('#roomStyleList').append(addStr);

			if($(".roomStyle").size() > 2) {
				$("#roomStyleList").css({
					marginTop : "-122px"
				});
			} else {
				$("#roomStyleList").css({
					marginTop : "0px"
				});
			}
			var c = document.getElementById(roomId, image);
			
			build.convertRoomTo2D(c, image, build.roomFloors);

			$('#dockItemList #drawRoom').click(function(){drawRoom(this)});
			
			// build.changeRoomThumb(ctxRoom3, image, walls);
			
		});
		$('#setting').click(function(){
			build.initStructureObject3D();
			build.loadStructure();
			
			for (var i=0; i < build.structures.length; i++) {
			 	var walls = build.calcWalls3D(build.structures[i].structure);
				build.facade(walls);
			};

			$('.facilityPanel').empty();
			$('.stage canvas').unbind();
			$('.stage canvas').bind('click', function(event) {
				build.getFacility(event);
			});
			scene.remove(build.rollOverMesh);
			
		});
		$('.improom').bind('click', function() {
			$('canvas').unbind('mousemove');
			$('canvas').unbind('mousedown');
			$('canvas').unbind('mouseup');

			// var walls = build.calcWalls(scene.getChildByName('group'),show2DCanvas());
			// function show2DCanvas(){、
			// console.warn(build.structs);
			// };
			var walls = build.calcWalls(scene.getChildByName('group'));
			var roomId = "c" + walls.id;
			var roomStyleId = "s" + walls.id;
			var rsd = "#" + roomStyleId;
			// var strSize=walls.size.x+'*'+walls.size.z;
			var addStr = "<div class=roomStyle id=" + roomStyleId + " wid=" + walls.id + ">" + 
							"<div class=roomStruct style=width:100%;height:100px>" + 
								"<canvas id=" + roomId + " style='width:100%; height:100%'></canvas>" + 
							"</div>" + 
							"<div class='roomType'> 序号:" + walls.structureNum + "类型:" + RoomUtil.getRoomTypeName(walls.roomType) + "</div>" + 
						"</div>";
			var cid = "#" + roomId;

			$('#roomStyleList').append(addStr);

			if($(".roomStyle").size() > 2) {
				$("#roomStyleList").css({
					marginTop : "-122px"
				});
			} else {
				$("#roomStyleList").css({
					marginTop : "0px"
				});
			}

			$(rsd).bind('click',function(){
			$('.selected').removeClass('selected');
			$(this).addClass('selected');
			}).bind('dblclick', function() {
				build.loadStructure();
				$('canvas').bind('click', function(event) {
					build.getStructure(event);
				});
			});
			var c = document.getElementById(roomId, image);
			var ctxRoom3 = c.getContext("2d");

			build.putTo2D(ctxRoom3, image, walls);
			$('#dockItemList #drawRoom').click(function(){drawRoom(this)});
		});
		$('.cleroom').bind('click', function() {
			$("#roomStyleList").empty();
		});
		$('#dockItemList #drawRoom').click(function() {

			drawRoom(this);
		});
		var roomNum=0;
		function drawRoom(roomItem){
			roomNum+=1;
			var roomType = $(roomItem).attr('type');
			build.initStructureObject3D(roomType,roomNum);
			$('canvas').bind('mousemove', function(event) {build.moveArea(event)
			});
			$('canvas').bind('mousedown', function(event) {build.startArea(event)
			});
			$('canvas').bind('mouseup', function(event) {build.endArea(event)
			});
			$('canvas').bind('dblclick', function(event) {build.getArea(event)
			});
			// $("#dockItemList #drawRoom").unbind();
			return false;
		};
		$('#facadeHouse').click(function() {
			$('canvas').unbind('mousemove');
			$('canvas').unbind('mousedown');
			$('canvas').unbind('mouseup');
			$('canvas').bind('click', function(event) {
				build.getFacility(event);
			});
			walls = build.calcWalls(scene.getChildByName('group'));
			// scene = new THREE.Scene;
			// build.setScene(scene);
			// camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000);
			// // camera = new THREE.CombinedCamera( window.innerWidth, window.innerHeight, 45, 1, 10000, -2000, 10000 );
			// camera.orgPosition = new THREE.Vector3(0, 100, 500);
			camera.position.y = 600;
			camera.position.z = 600;
			camera.lookAt(new THREE.Vector3(0, 0, 0));
			// camera.position.z = 1300;
			// build.setCamera(camera);

			gone2Facade = true;
			controls = new FirstPersonControls(camera);
			controls.lookSpeed = 0.0125;
			controls.movementSpeed = 500;
			controls.noFly = false;
			controls.lookVertical = true;
			controls.constrainVertical = false;
			controls.freeze = false;

			build.clearStructure();
			build.facade(walls);

			return false;
		});

		// $('#mergerHouse').click(function() {
			// // for(var i in build.structures) {
				// // s3d = build.structures[i];
				// // // if(s3d.name == 'structure3D') {
					// // var walls = build.calcWalls3D(s3d);
					// // build.facade(walls);
					// // $('.facilityPanel').empty();
					// // $('.stage canvas').unbind();
					// // $('.stage canvas').bind('click', function(event) {build.getFacility(event)
					// // })
				// // // }
			// // }
					// var walls = build.calcWalls3D();
					// build.facade(walls);
					// $('.facilityPanel').empty();
					// $('.stage canvas').unbind();
					// $('.stage canvas').bind('click', function(event) {build.getFacility(event)
					// })
// 					
		// });
		
	$('#clearHouse').click(function(){
		build.clearStructure();		
	});
		
		$('.panel').mouseenter(function(){
		// $('canvas').unbind('click');
		}).mouseleave(function() {
			$('canvas').bind('click', function(event) {
				// getFacility(event)
			});
		});
		$('.Move_f').mouseenter( function() {
		$('.BMap_stdMpPan').css('background-position',"0px -44px");
		}).mousedown(function() {

			controls.freeze = false;
			controls.moveForward = true;

			controls.moveRightFreeze = false;
			controls.moveLeftFreeze = false;
			controls.moveBackwardFreeze = false;
		});
		$('.Move_r').mouseenter( function() {
		$('.BMap_stdMpPan').css('background-position',"0px -88px");
		}).mousedown(function() {
			controls.freeze = false;
			controls.moveRight = true;

			controls.moveForwardFreeze = false;
			controls.moveLeftFreeze = false;
			controls.moveBackwardFreeze = false;
		});
		$('.Move_b').mouseenter( function() {
		$('.BMap_stdMpPan').css('background-position',"0px -132px");

		}).mousedown(function() {
			controls.freeze = false;
			controls.moveBackward = true;

			controls.moveRightFreeze = false;
			controls.moveLeftFreeze = false;
			controls.moveForwardFreeze = false;

		});
		$('.Move_o').mouseenter( function() {
		$('.BMap_stdMpPan').css('background-position',"0px -132px");

		}).mousedown(function() {
			camera.position.copy(camera.orgPosition);
			controls.moveRightFreeze = false;
			controls.moveLeftFreeze = false;
			controls.moveForwardFreeze = false;
			controls.moveBackwardFreeze = false;

		});
		$('.Move_l').mouseenter( function() {
		$('.BMap_stdMpPan').css('background-position',"0px -176px");
		}).mousedown(function() {
			controls.freeze = false;
			controls.moveLeft = true;

			controls.moveRightFreeze = false;
			controls.moveForwardFreeze = false;
			controls.moveBackwardFreeze = false;
		});
		$('.Rotate_l').mouseenter( function() {
		$('.BMap_stdMpPan').css('background-position',"0px -176px");
		}).mousedown(function() {
			controls.freeze = false;
			controls.rotateLeft = true;
		});
		$('.Rotate_r').mouseenter( function() {
		$('.BMap_stdMpPan').css('background-position',"0px -176px");
		}).mousedown(function() {
			controls.freeze = false;
			controls.rotateRight = true;
		});
		$('.Rotate_l').mouseup(function() {
			controls.freeze = true;

			controls.moveForward = false;
			controls.moveRight = false;
			controls.moveBackward = false;
			controls.moveLeft = false;

			controls.rotateLeft = false;
			controls.rotateRight = false;

			controls.lookUp = false;
			controls.lookRight = false;
			controls.lookDown = false;
			controls.lookLeft = false;
			controls.constrainVertical = true;
		});
		$('.Look_u').mouseenter( function() {
		$('.BMap_stdMpPan').css('background-position',"0px -44px");
		}).mousedown(function() {
			//alert('mousedown');
			controls.freeze = false;
			controls.lookUp = true;

			controls.moveLeftFreeze = false;
			controls.moveRightFreeze = false;
			controls.moveForwardFreeze = false;
			controls.moveBackwardFreeze = false;
		});
		$('.Look_r').mouseenter( function() {
		$('.BMap_stdMpPan').css('background-position',"0px -88px");
		}).mousedown(function() {
			controls.freeze = false;
			controls.lookRight = true;

			controls.moveLeftFreeze = false;
			controls.moveRightFreeze = false;
			controls.moveForwardFreeze = false;
			controls.moveBackwardFreeze = false;
		});
		$('.Look_d').mouseenter( function() {
		$('.BMap_stdMpPan').css('background-position',"0px -132px");
		}).mousedown(function() {
			controls.freeze = false;
			controls.lookDown = true;

			controls.moveLeftFreeze = false;
			controls.moveRightFreeze = false;
			controls.moveForwardFreeze = false;
			controls.moveBackwardFreeze = false;
		});
		$('.Look_l').mouseenter( function() {
		$('.BMap_stdMpPan').css('background-position',"0px -176px");
		}).mousedown(function() {
			controls.freeze = false;
			controls.lookLeft = true;

			controls.moveLeftFreeze = false;
			controls.moveRightFreeze = false;
			controls.moveForwardFreeze = false;
			controls.moveBackwardFreeze = false;
		});
		$('.Look_o').mouseenter( function() {
		$('.BMap_stdMpPan').css('background-position',"0px -132px");

		}).mousedown(function() {
			controls.lookOrgin = true;
			controls.freeze = false;

			controls.moveLeftFreeze = false;
			controls.moveRightFreeze = false;
			controls.moveForwardFreeze = false;
			controls.moveBackwardFreeze = false;

		});
		$('.BMap_button').mouseleave( function() {
		$('.BMap_stdMpPan').css('background-position',"0px 0px");
		setCtrlsFlagToFalse();
		}).mouseup(function() {
			setCtrlsFlagToFalse();

		});
		function setCtrlsFlagToFalse() {
			controls.freeze = true;

			controls.moveForward = false;
			controls.moveRight = false;
			controls.moveBackward = false;
			controls.moveLeft = false;

			controls.rotateLeft = false;
			controls.rotateRight = false;

			controls.lookUp = false;
			controls.lookRight = false;

			controls.lookDown = false;
			controls.lookLeft = false;
			controls.lookOrgin = false;
			//controls.lon=-110;
			lon = controls.lon;
		}

		$('.stdMoveCtr').mouseenter(function(){
		$('.moveCtrRm').css('color',"#990000");
		}).mouseleave(function() {
			$('.moveCtrRm').css('color', "#000000");
		});
		$('.stdLookCtr').mouseenter(function(){
		$('.lookCtrRm').css('color',"#990000");
		}).mouseleave(function() {
			$('.lookCtrRm').css('color', "#000000");
		});
		$('.stdRotateCtr').mouseenter(function(){
		$('.rotateCtrRm').css('color',"#990000");
		}).mouseleave(function() {
			$('.rotateCtrRm').css('color', "#000000");
		});
		$('.panel').draggable({
			cursor : 'crosshair',
			handle : ".draghandle",
			containment : '.page',
			scroll : false
		});

	});

</script>
<div id="leftBar" style="width: 73px; height: 100%; background: url(<?php echo Yii::app()->baseUrl."/images/webgl/head/StripePattern.png"?>) repeat;">
	<div id="dockContainer" class="dock_container dock_pos_left" style="z-index: 10; ">
		<div class="dock_middle">
			<div id="dockItemList" class="dock_item_list" customacceptdrop="1">
				<div title="去装修">
					<div class="appButton_appIcon ">
						<img id='setting' class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/dock/history-sm.png"?> alt="装修" type=1>
					</div>
				</div>
				
				<div title="绘制卧室">
					<div class="appButton_appIcon ">
						<img id='drawRoom' class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/dock/history-sm.png"?> alt="卧室" type=1>
					</div>
				</div>
				<div title="绘制客厅">
					<div class="appButton_appIcon ">
						<img id='drawRoom' class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/dock/history-sm.png"?> alt="客厅" type=2>
					</div>
				</div>
				<div title="绘制卫生间">
					<div class="appButton_appIcon ">
						<img id='drawRoom' class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/dock/history-sm.png"?> alt="卫生间" type=3>
					</div>
				</div>
				<div title="绘制厨房">
					<div class="appButton_appIcon ">
						<img id='drawRoom' class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/dock/history-sm.png"?> alt="厨房" type=4>
					</div>
				</div>
				<div title="绘制储藏室">
					<div class="appButton_appIcon ">
						<img id='drawRoom' class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/dock/history-sm.png"?> alt="储藏室" type=5>
					</div>
				</div>
				<!-- <div title="拆墙">
				<div class="appButton_appIcon ">
				<img id="facadeHouse" class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/dock/history-sm.png"?> alt="拆墙">
				</div>
				</div> 
				<div title="砌墙">
					<div class="appButton_appIcon ">
						<img id="buildWall" class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/dock/history-sm.png"?> alt="砌墙">
					</div>
				</div>
				<div title="入库">
					<div class="appButton_appIcon ">
						<img id="put2room" class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/dock/history-sm.png"?> alt="入库">
					</div>
				</div> -->
				<div title="生成户型">
					<div class="appButton_appIcon ">
						<img id="mergerHouse" class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/dock/history-sm.png"?> alt="组合">
					</div>
				</div>
				<div title="清空">
					<div class="appButton_appIcon ">
						<img id="clearHouse" class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/dock/history-sm.png"?> alt="清空">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class='panel'>
	<div class="panelbar">
		场景面板
	</div>
	<div class="BMap_stdMpCtrl stdMoveCtr">
		<div class='moveCtrRm'>
			漫步
		</div>
		<div class="BMap_stdMpPan moveCtr" >
			<div class="BMap_button Move_f" title="前进"></div>
			<div class="BMap_button Move_l" title="左移"></div>
			<div class="BMap_button Move_r" title="右移"></div>
			<div class="BMap_button Move_b" title="后退"></div>
			<div class="BMap_button Move_o" title="原点"></div>
		</div>
	</div>
	<div class="BMap_stdMpCtrl stdLookCtr">
		<div class='lookCtrRm'>
			观察
		</div>
		<div class="BMap_stdMpPan lookCtr" >
			<div class="BMap_button Look_u" title="仰视"></div>
			<div class="BMap_button Look_l" title="左顾"></div>
			<div class="BMap_button Look_r" title="右盼"></div>
			<div class="BMap_button Look_d" title="俯视"></div>
			<div class="BMap_button Look_o" title="直视"></div>
		</div>
	</div>
	<div class="BMap_stdMpCtrl stdRotateCtr">
		<div class='rotateCtrRm'>
			旋转
		</div>
		<div class="BMap_stdMpPan rotateCtr">
			<div class="BMap_button Rotate_u" title="向上看"></div>
			<div class="BMap_button Rotate_l" title="左转"></div>
			<div class="BMap_button Rotate_r" title="右转"></div>
			<div class="BMap_button Rotate_d" title="向下看"></div>
		</div>
	</div>
	<div class="rTypePosition"></div>
</div>
<div class="facilityPanel "/></div>
<div id="roomStyleShow" style="margin-left:4px; width: 233px; position: absolute;top: 400px;background-color: #EDEDED;background:url(<?php echo Yii::app()->baseUrl."/images/webgl/head/StripePattern.png"?>) repeat">
	<div class="panelbar">
		房间
	</div>
	<div class="appButton_appIcon " id="alloy_icon_app_50_3_icon_div" style="">
		<img id='arrow_up' class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/panel/arrow.png"?> alt="向上" >
	</div>
	<div id="roomStyleView" style="width: 100%; height:250px;overflow: hidden;">
		<div id='roomStyleList' style="width: 100%; height:1000px; margin-top:-122px">
			<!-- 			<div class="roomStyle">
			<div class="roomStruct" style="width:100%;height:100px">
			<canvas id="room1" style="width:100%; height:100%"></canvas>
			</div>
			<div class='roomType'style="width:100%">
			1
			</div>
			</div>
			<div class="roomStyle">
			<div class="roomStruct" style="width:100%;height:100px">
			<canvas id="room2" style="width:100%; height:100%"></canvas>
			</div>
			<div class='roomType'>
			2
			</div>
			</div> -->
			<!-- <div class="roomStyle ">
			<div class="roomStruct" style="width:100%;height:100px">
			<canvas id="room3" style="width:100%; height:100%"></canvas>
			</div>
			<div class='roomType'>
			3
			</div>
			</div>
			<div class="roomStyle ">
			<div class="roomStruct" style="width:100%;height:100px">
			<canvas id="room4" style="width:100%; height:100%"></canvas>
			</div>
			<div class='roomType'>
			4
			</div>
			</div> -->
			<!--<div class="roomStyle ">
			<div class="roomStruct" style="width:100%;height:100px">
			<canvas id="room3" style="float:left" width="200px" height="100px"></canvas>
			</div>
			<div class='roomType'>
			test
			</div>
			</div>
			<div class="roomStyle ">
			<div class="roomStruct" style="width:100%;height:100px">
			<canvas id="room3" style="float:left" width="200px" height="100px"></canvas>
			</div>
			<div class='roomType'>
			test
			</div>
			</div>
			<div class="roomStyle ">
			<canvas id="room3" style="float:left" width="200px" height="100px"></canvas>
			<div class='roomType'>
			test
			</div>
			</div>
			<div class="roomStyle ">
			<canvas id="room3" style="float:left" width="200px" height="100px"></canvas>
			<div class='roomType'>
			test
			</div>
			</div> -->
		</div>
	</div>
	<div class="appButton_appIcon " id="alloy_icon_app_50_3_icon_div" style="">
		<img id='arrow_down' class="appButton_appIconImg" src=<?php echo Yii::app()->baseUrl."/images/panel/arrow.png"?> alt="向下" >
	</div>
	<div class="panelbar">
		<a class='cleroom'href="#">清空</a>
		<a class='delroom'href="#">删除</a>
		<a class='exproom'href="#">引用</a>
		<a class='improom'href="#">入库</a>
		<a class='okroom'href="#">确定</a>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		var listshow = false;
		$('#roomStyleShow').draggable({
			cursor : 'crosshair',
			handle : ".draghandle",
			containment : '.page',
			scroll : false
		});

		if($(".roomStyle").size() > 2) {
			$("#roomStyleList").css({
				marginTop : "-122px"
			});
		} else {
			$("#roomStyleList").css({
				marginTop : "0px"
			});
		}

		$('#arrow_up').click(function() {
			// $("#roomStyleList").css({marginTop:"0px"});

			if($(".roomStyle").size() > 2) {
				$("#roomStyleList").animate({
					marginTop : "-244px"
				}, function() {
					$(this).css({marginTop:"-122px"}).find(".roomStyle:first").appendTo(this);
				});
			}

		});
		$('#arrow_down').click(function() {

			if($(".roomStyle").size() > 2) {
				$("#roomStyleList").animate({
					marginTop : "+0px"
				}, function() {
					$(this).css({marginTop:"-122px"}).find(".roomStyle:last").prependTo(this);
				});
			}
		});
		$('#leftBar').click(function() {
			$("#dockItemList").animate({
				height : 1000
			}, "slow");
		});
	})
</script>